<template>
 <div class="container" @click="hanlegraclose">
        <div class="wrapper">
             <swiper :options="swiperOptions">  
                <!-- slides -->
                <swiper-slide v-for="(item,index) in imgs" :key="index">
                    <img class="IMG" :src="item" alt="">
                </swiper-slide>
                
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
 </div>
</template>

<script>
 export default {
     props:{
        imgs:{
            type:Array,
            default(){
                return [
                   
                ]
            }
        }
     },
   data () {
     return {
         swiperOptions:{
             pagination:".swiper-pagination",
             paginationType : 'fraction',
             observeParents:true,
             observer:true
         }
     }
   },
   methods : {
        hanlegraclose (){
            this.$emit('close')
        }
   },
   components: {

   }
 }
</script>

<style lang="stylus" scoped>
    .container{
        position fixed
        left 0
        z-index 99
        display flex
        flex-direction column
        justify-content center
        top 0
        right 0
        bottom 0
        background #000
    }
    .container >>>.swiper-container{
        overflow inherit
    }
    .wrapper{
        width 100%
        height 0

        padding-bottom 100%
    }
    img{
        width 100%
    }
    .swiper-pagination{
        color #e40ce4
        bottom -1rem
    }
</style>
